<template>
    <div>
{{ count }}
<p>{{ plusOne }}</p>
-------
<div>{{ plusData }}</div>
    </div>
</template>
<script setup>
import { ref,computed,isRef,unref,toRef,isProxy,isReactive,isReadonly,shallowRef,reactive,watch ,triggerRef } from 'vue'

const count = ref(0)
console.log(count.value)
isRef(count)
const ddt= unref(count);

const plusOne = computed(()=>count.value+1)

const plusData = computed({
    get:()=>count.value+1,
    set:(val)=>{count.value=val-1}
},{
    onTrack(e){
        // debugger
    },
    onTrigger(e){
        // debugger
    }
})

const obj = reactive({
    count:123
})

const state = reactive({
    count:0
});
const doAsyncWork = (id)=>{
    let response= new Promise((res,reject)=>{
        res(id)
    })
    return {
        response:response,
        cancel:(params)=>params
    }
}
watch(state,async (newState,oldState,onCleanup)=>{
    const { response, cancel} = doAsyncWork(newState)
    onCleanup(cancel)
    data.value = await response;
},{
    flush:"post",
    onTrack(e){},
    onTrigger(e){}
})


const stateNew = shallowRef({count:1})
console.log(stateNew)

stateNew.value.count='2222';
console.log(stateNew)
const dataState = triggerRef(stateNew)
console.log(dataState)
</script>